<script lang="ts" setup>
import Result from './components/result.vue'
import NavigationBar from './components/NavigationBar.vue'
import type { IProduct } from '@/typings/interface'
import type { LoadMore } from '@/typings/components'
import { getSearchResults } from '@/api/search'
import XLoadMore from '@/components/XLoadMore.vue'
import History from './components/History.vue'

let result = ref<IProduct[]>([])

const pageInfo = reactive({
  page: 0,
  size: 10,
  title: '',
  isEnd: false,
  status: 'more' as LoadMore
})

// 请求课程列表数据
async function setResults() {
  if (pageInfo.isEnd)
    return
  pageInfo.page++
  pageInfo.status = 'loading'
  const { data } = await getSearchResults(pageInfo)
  result.value = result.value.concat(data.current_data)
  pageInfo.status = 'more'
  if (data.current_data.length < pageInfo.size) {
    pageInfo.isEnd = true
    pageInfo.status = 'nomore'
  }
}

// 初始化加载
onLoad((option?: Record<string, string>) => {
  if (!option || !option.content)
    return
  pageInfo.title = option.content
  setResults()
})


onReachBottom(async () => {
  await setResults()
})
</script>

<template>
  <view>
    <NavigationBar />
    <view px mt>
      <History v-if="!pageInfo.title" />
      <view v-else>
        <Result :result="result" />
        <XLoadMore :status="pageInfo.status" />
      </view>
    </view>
  </view>
</template>
